<template>
<div class="common-page case-search">
  <div class="tab-panel-wrap">
    <tab-panel :tab-list="list">
      <div class="list-panel" slot="case-info">
        <xdh-list-panel 
          class=""
          :fit="true"
          :load="listLoad" 
          :state="state"
          :sizes="[10]" :size="10"
          :is-auto="true"
        >
          <xdh-table :data="state.list"
            :columns="tableCols" 
            height="100%" 
            border
            :auto-load="true"
            size="mini"
          >
            <template slot="ctrl" slot-scope="scope">
              <el-button size="mini" type="text" @click="listClick(scope)">认领</el-button>
            </template>
          </xdh-table>
        </xdh-list-panel>
      </div>
      <div slot="single-case" slot-scope="scope">3{{scope.tab.label}}</div>
      <div slot="series-case" slot-scope="scope">4{{scope.tab.label}}</div>
    </tab-panel>
  </div>
</div>
</template>

<style lang="scss" scoped>
.case-search{
  display: flex;
  flex-flow: column;
  .tab-panel-wrap{
    flex: 1;
    padding: 0 5px;
    .list-panel{
      height: 100%;
    }
  }
  
}
</style>

<script>
// import XdhBreadcrumb from '@/widgets/xdh-breadcrumb'
import tabPanel from '@/components/common/tab-panel'
import XdhListPanel from '@/widgets/xdh-list-panel'
import XdhTable from '@/widgets/xdh-table'
import cases from '@/base/mixin/cases'
import callPlatform from '@/helper/call-platform'
import {APP_DETECTIVE_HOST} from '@/config'
const INDEXCOL = { type: 'index', label: '序号', fixed: 'left', width: '80' }
const CONTROLCOL = { label: '操作', fixed: 'right', width: '120', prop: 'ctrl' }
export default {
  name: 'caseSearch',
  mixins: [cases],
  components: {
    tabPanel,
    XdhListPanel,
    XdhTable
  },
  props: {
  },
  data() {
    return {
      breadData: [
        {text: '主页', to: '/'},
        {text: '案件查询', to: '/case-search'}
      ],
      list: [
        { label: '警情', name: 'case-info' },
        { label: '案件', name: 'single-case' },
        { label: '系列案', name: 'series-case' }
      ],
      state: {
        list: [],
        total: 0
      },
      tableCols: []
    }
  },
  watch: {
    
  },
  methods: {
    listLoad(page, limit) {
      return this.getCaseInfo({
        pageSize: limit,
        pageIndex: page
      }).then((res) => {
        this.state.total = res.total
        this.state.list = res.list
        this.tableCols = this._tableColumnInit(res.colData)
      })
    },
    _tableColumnInit(colData) { // 初始化列表头
      let contents = colData.map((item) => {
        return {
          label: item.label,
          prop: item.prop,
          showOverflowTooltip: true
        }
      })
      return [ INDEXCOL, ...contents, CONTROLCOL ]
    },
    listClick(scope) {
      console.log(scope)
      callPlatform(
        {
          fromPlatformApp: true,
          app: {
            label: '研判工作台',
            name: 'detective',
            url: APP_DETECTIVE_HOST // 'http://www.baidu.com'
          }
        }
      )
    }
  },
  mounted() {
    console.log(this.$route)
  }
}
</script>

